<script setup>
    import {ref} from 'vue'
    import useUserStore  from '@/store/index.js'


    const onClickLeft = () => history.back();

    const Store = useUserStore()
    console.log('Store222',Store.foodList)
    const value = ref(1);
    let size = 1
    console.log('Store.foodList',Store.foodList)
    let sum = ref(0)
    const totalPrice = function(){
       return sum.value =  Store.foodList.reduce((prev,item)=>prev+item.price*size,0)
     }
     totalPrice()

     const changeqty = function(item){
        console.log(size++) 
        totalPrice()
    }

    

    
    

</script>

<template>
    <div>
        <div class="headbox">
            <van-nav-bar
            class="headnav"
            title="下单"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
            />
        </div>
        <van-row v-for="item in Store.foodList ">
            <van-col span="17" >
                <van-card
                :price="item.price"
                :title="item.goodsname"
                thumb="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
                />
            </van-col>
                <van-stepper v-model="value" @click="changeqty(item)" />
            <van-col >
               
            </van-col>
        </van-row>

        <div>
            <van-space :size="200" class="listbottom" style="background-color: #ffffff;">
                <span style="width:100px">总额￥{{sum}}</span>
                <van-button type="danger"  name="end" to="salesreturn">下菜单</van-button>
            </van-space>  
        </div>
    </div>
</template>

<style scoped>
    .headnav {
        background-color: deepskyblue;
        
    }

    .listbottom {
      width: 100vw;
      border: 1px solid #ccc;
      position: fixed;
      bottom: 0px;
    }
</style>







// const goodslist = [
    //     {
    //         title:'舒芙蕾裸蛋糕',
    //         id:1,
    //         price:'88',
    //         thumb:'../public/img/01.jpg'
    //     },
    //     {
    //         title:'奥利奥盒子',
    //         id:2,
    //         price:'38',
    //         thumb:'../public/img/02.jpg'
    //     },
    //     {
    //         title:'蓝莓芝士蛋糕',
    //         id:3,
    //         price:'228',
    //         thumb:'../public/img/03.jpg'
    //     },
    //     {
    //         title:'芝士蛋糕卷',
    //         id:4,
    //         price:'168',
    //         thumb:'../public/img/04.jpg'
    //     },
    //     {
    //         title:'榴莲蛋糕',
    //         id:5,
    //         price:'288',
    //         thumb:'../public/img/05.jpg'
    //     },
       
    // ]